Testing Library

https://testing-library.com/img/octopus-64x64.png

インストール

code:sh

$ npm install --save-dev @testing-library/react happy-dom @testing-library/jest-dom

happy-dom

@testing-library/jest-dom

テスト内で DOM の状態に関するアサーションを行えるようにするライブラリ

code:vite.config.ts

import { defineConfig } from "vitest/config";

import react from "@vitejs/plugin-react";

export default defineConfig({

test: {

globals: true,

environment: "happy-dom",

},

});

code:test-setup.ts

import "@testing-library/jest-dom/vitest";

code:tsconfig.json

{

"compilerOptions": {

...

},

}

サンプルコード

code:CarouselButton.tsx

const CarouselButton = () => <button />;

export default CarouselButton;

code:CarouselButton.test.tsx

import { render, screen } from "@testing-library/react";

import CarouselButton from "./CarouselButton";

describe("CarouselButton", () => {

it("renders a <button>", () => {

render(<CarouselButton />);

expect(screen.getByRole("button")).toBeInTheDocument();

});

});

API

シミュレートされた DOM は自動でテスト毎にリセットされる

要素が見つからない場合や複数見つかる場合はエラーを投げる

jest-dom

DOM 要素が HTML ドキュメント内に存在するかチェックするアサーション

コンポーネントの状態が変更されたとき、その変更を DOM に反映するよう React に指示する関数

code:sh

$ npm install --save-dev @testing-library/user-event

使用例

インストール

code:sh

$ npm install --save-dev eslint-plugin-testing-library